<template>
  <el-card>
    <div class="card-header">
      <span>原材料型号列表</span>
    </div>
  </el-card>
  <el-card>
    <el-form :inline="true" :model="listForm">
      <el-form-item label="原材料规格">
        <el-input v-model="listForm.name" clearable placeholder="例如：无缝管38*1.4"/>
      </el-form-item>
      <el-form-item label="原材料材质">
        <el-input  v-model="listForm.types" clearable placeholder="例如：#20"/>
      </el-form-item>
      <el-form-item label="">
        <perms-button
            perms="stockin:material:list"
            :type="Types.success"
            :plain="true"
            @action="list"/>
      </el-form-item>
      <el-form-item label="">
        <perms-button
            perms="stockin:material:add"
            :type="Types.primary"
            :plain="true"
            label="添加原材料型号"
            @action="showDialog('add')"/>
      </el-form-item>
    </el-form>
    <el-table :data="materials" :border="true">
      <template #empty>
        <el-empty/>
      </template>
      <el-table-column prop="name" label="原材料规格" min-width="100"/>
      <el-table-column prop="types" label="原材料材质" min-width="100"/>
      <el-table-column prop="created_at" label="添加时间" width="190">
        <template #default="scope">
          {{timeFormat(scope.row.created_at)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="260">
        <template #default="scope">
          <perms-button
              perms="stockin:material:update"
              :type="Types.primary"
              :plain="true"
              @action="showDialog('update', scope.row)"/>
          <el-popconfirm
              :icon="InfoFilled"
              icon-color="#F56C6C"
              :title='`确认删除原材料型号【${scope.row.name}】？`'
              cancel-button-text="取消"
              confirm-button-text="确认删除"
              cancel-button-type="info"
              confirm-button-type="danger"
              @confirm="remove(scope.row.id)"
              width="300"
          >
            <template #reference>
              <perms-button
                  perms="stockin:material:delete"
                  :type="Types.danger"
                  :plain="true"/>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        class="page"
        v-model:current-page="listForm.page"
        v-model:page-size="listForm.size"
        :page-sizes="[30, 40, 50, 100]"
        :disabled="loading"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="list"
        @current-change="list"
    />
    <el-dialog :close-on-click-modal="false" v-model="visible" title="添加原材料型号" :draggable="true">
      <el-form :model="materialForm">
        <el-form-item label="原材料规格">
          <el-input v-model="materialForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="原材料材质">
          <el-input v-model="materialForm.types" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {MaterialListR} from "@/api/materials";
import {ListRequest, AddRequest, RemoveRequest} from "@/interface/materials";
import {ElMessage} from "element-plus";
import {MaterialAddR, MaterialRemoveR,MaterialUpdateR} from "@/api/materials";
import * as dayjs from 'dayjs'
import {InfoFilled} from "@element-plus/icons-vue";
import PermsButton from '@/components/PermsButton.vue'
import {Types} from "@/interface/enum";

//加载标识
const loading = ref<boolean>(false)
//dialog标识
const visible = ref<boolean>(false)
//动作标识
const action = ref<string>('')

type Material = {
  id: number,
  name: string,//原材料规格
  types: string,//原材料材质
  created_at: number
}

const materials = ref<Material>()
const total = ref<Number>(0)

//表单：列表
const listForm = reactive<ListRequest>({page: 1, size: 30, name:'', types:''})
//表单：添加
const materialForm = reactive<AddRequest>({id:0,  name:'',  types:'',})

//原材料型号列表
const list = () => {
  loading.value = true
  MaterialListR(listForm).then(res => {
    loading.value = false
    return res.data
  }).then(res => {
    if (res.code === 200) {
      materials.value = res.data.list as Material
      total.value = res.data.total
    } else {
      //ElMessage.error(res.msg)
    }
  }).catch(err => {
    loading.value = false
    console.log('err:', err)
  })
}

//showDialog
const showDialog = (act:string, row?:Material)=>{
  action.value=act
  switch (act) {
    case 'add':
      materialForm.id = 0
      materialForm.name = ''
      materialForm.types = ''
      visible.value=true
      break
    case 'update':
      materialForm.id = row?.id as number
      materialForm.name = row?.name as string
      materialForm.types = row?.types as string
      visible.value=true
      break
    default:
      ElMessage.warning('未知操作')
  }
}

//提交
const handleSubmit = ()=>{
  switch (action.value) {
    case 'add':
      add()
      break
    case 'update':
      update()
      break
    default:
      ElMessage.warning('未知操作')
  }
}

//添加原材料型号
const add = () => {
  loading.value = true
  MaterialAddR(materialForm).then(res => {
    loading.value = false
    return res.data
  }).then(res => {
    if (res.code === 200) {
      visible.value = false
      list()
      ElMessage.success('原材料型号添加成功')
    }else{
      //ElMessage.error(res.msg)
    }
  }).catch(err => {
    loading.value = false
    console.log('err:', err)
  })
}

//删除原材料型号
const remove = (id:number) => {
  loading.value = true
  let req = <RemoveRequest>{id:id}
  MaterialRemoveR(req).then(res => {
    loading.value = false
    return res.data
  }).then(res => {
    if (res.code === 200) {
      list()
      ElMessage.success('原材料型号删除成功')
    }else{
      //ElMessage.error(res.msg)
    }
  }).catch(err => {
    loading.value = false
    console.log('err:', err)
  })
}


//修改原材料型号信息
const update = () => {
  console.log('原材料型号信息:', materialForm)
  loading.value = true
  MaterialUpdateR(materialForm).then(res => {
    loading.value = false
    return res.data
  }).then(res => {
    if (res.code === 200) {
      visible.value = false
      list()
      ElMessage.success('原材料型号修改成功')
    }else{
      //ElMessage.error(res.msg)
    }
  }).catch(err => {
    loading.value = false
    console.log('err:', err)
  })
}

//时间格式
const timeFormat = (timestamp:number) => {
  return dayjs.unix(timestamp).format('YYYY-MM-DD HH:mm:ss')
}


onMounted(() => {
  list()
})

</script>

<style scoped>
.el-card{
  margin-bottom: 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page {
  margin-top: 10px;
}
</style>

